<template>
  <div>
    <fastchoose-buttons-template-phone
      @reset="handleReset"
      @confirm="handleConfirm"
      @cancel="handleCancel"
      >
      <fastchoose-color ref="color" @click="updateColorCondition"></fastchoose-color>
      <fastchoose-bigsmall ref="bigsmall" @click="updateBigsmallCondition"></fastchoose-bigsmall>
      <fastchoose-animal ref="animal" @click="updateShengxiaoCondition"></fastchoose-animal>
    </fastchoose-buttons-template-phone>
  </div>

</template>

<script>
import FastchooseButtonsTemplatePhone from '@/components/base/fastchoose-buttons/common/fastchoose-buttons-template-phone'
import fastchooseColor from '@/components/base/fastchoose-buttons/common/fastchoose-color'
import fastchooseBigsmall from '@/components/base/fastchoose-buttons/common/fastchoose-bigsmall'
import fastchooseAnimal from '@/components/base/fastchoose-buttons/common/fastchoose-animal'
export default {
  components: {
    FastchooseButtonsTemplatePhone,
    fastchooseColor,
    fastchooseBigsmall,
    fastchooseAnimal
  },
  data() {
    return {
      bigsmallCondition: '',
      colorCondition: '',
      shengxiaoCondition: ''
    }
  },
  methods: {
    updateBigsmallCondition(condition) {
      this.bigsmallCondition = condition 
      this.$refs.animal.clearState()
      // this.$emit('click', this.colorCondition + this.bigsmallCondition)
    },
    updateColorCondition(condition) {
      this.colorCondition = condition
      this.$refs.animal.clearState()
      // this.$emit('click', this.colorCondition + this.bigsmallCondition)
    },
    updateShengxiaoCondition(condition) {
      this.bigsmallCondition = ''
      this.colorCondition = ''
      this.$refs.color.clearState()
      this.$refs.bigsmall.clearState()
      this.shengxiaoCondition = condition 
      // this.$emit('click', condition)
    },
    handleReset() {
      this.$refs.color.clearState()
      this.$refs.bigsmall.clearState()
      this.$refs.animal.clearState()
    },
    handleConfirm() {
      let condition1 = this.colorCondition + this.bigsmallCondition 
      let condition2 = this.shengxiaoCondition
      this.$emit('click', condition1 == '' ? condition2 : condition1)
      this.$emit('close')
    },
    handleCancel() {
      this.$emit('close')
    }
  }
}
</script>